<template>
<div>
    <el-row type="flex" justify="center">
      <!-- gutter 栅格间距 -->
      <el-col :span="1">
        <!-- span 栅格占的列数，offset是偏移列数 -->
      </el-col>
    </el-row>
<el-row type="flex" justify="center">
      <!-- gutter 栅格间距 -->

          <el-col :span="18.5" class="card1"> 
            <!-- span 栅格占的列数，offset是偏移列数 -->
                <h1 class="hh1">MBTI测试</h1>

                <el-card class="box-card"  shadow="never" style="height:50vh">
                    <div style="height:150px">预计测试二十分钟</div>
                    <div style="height:200px;color:indianred;">选项只有一次机会，相信第一感觉</div>
                    <div>*结果仅供参考</div>
                </el-card>

                <div style="margin:0 auto;">

                <el-divider></el-divider>

                <el-row type="flex" justify="center">
                <el-form-item class="mb-4">
                    
                    <el-button type="primary" plain @click="this.$router.push({path:'/test',name:'Test'})">开始答题</el-button>

                </el-form-item>
                </el-row>

                </div>
          </el-col>

</el-row>

</div>
</template>

<script setup>
import { ref } from 'vue'
import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
name:'Teststart'
const value = ref()
const icons = [ChatRound, ChatLineRound, ChatDotRound]
</script>

<style>
.hh1 {
    text-align: center;color: indianred;
}
.el-row {
    margin-bottom: 50px;
}
.grid-content {
    /* background: rgb(14, 214, 131); */
    border-radius: 4px;
    min-height: 5px;
    min-width: 100px;

    text-align: center;

}
.card1{
    height: 80vh;
    width: 1100px;
    border-radius:30px;
    /* box-shadow: 0 2px 12px 0 rgb(243, 102, 102); */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
}
</style>
